<template>
<div>
  <el-card shadow="hover">
    <el-form :inline="true" :model="${(businessCode?uncap_first)!''}SearchForm" ref="${(businessCode?uncap_first)!''}SearchForm" label-width="74px">
      <el-form-item label="${businessName!}名称" prop="${(businessCode?uncap_first)!''}Name">
        <el-autocomplete
                popper-class="my-autocomplete"
                v-model="${(businessCode?uncap_first)!''}SearchForm.${(businessCode?uncap_first)!''}Name"
                :fetch-suggestions="${(businessCode?uncap_first)!''}SearchForm${businessCode!''}QuerySearchAsync"
                placeholder="请输入${businessName!}名称"
                @select="${(businessCode?uncap_first)!''}SearchForm${businessCode!''}Select"
                clearable>
          <template slot-scope="{ item }">
            <div class="name">${businessName!}编号：{{ item.code }}</div>
            <span class="code">${businessName!}名称：{{ item.value }}</span>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="${businessName!}编号" prop="${(businessCode?uncap_first)!''}Code">
        <el-input v-model="${(businessCode?uncap_first)!''}SearchForm.${(businessCode?uncap_first)!''}Code" placeholder="请输入${businessName!}编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="${(businessCode?uncap_first)!''}SearchFormSubmit(1)">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="${(businessCode?uncap_first)!''}SearchFormResetFields">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="hover">
    <el-button type="primary" icon="el-icon-news" size="small" @click="${(businessCode?uncap_first)!''}AddFormDialogVisible = true"
               v-if="permission_add">新增
    </el-button>
    <el-badge :value="this.${(businessCode?uncap_first)!''}SearchPageSelection.length" :hidden="this.${(businessCode?uncap_first)!''}SearchPageSelection.length < 1"
              class="item" v-if="permission_delete">
      <el-button type="danger" icon="el-icon-delete" size="small" @click="toolbarDeletesClick">批量删除
      </el-button>
    </el-badge>
    <a target="_blank" :href="'${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/m0005.json?' + ${(businessCode?uncap_first)!''}SearchFormQueryString"
       v-if="permission_export">
      <el-button type="warning" icon="el-icon-document" size="small">导出excel</el-button>
    </a>
    <a target="_blank" href="/download_import_template/${(businessCode?uncap_first)!''}.xls?action=download">
      <el-button type="info" icon="el-icon-download" size="small">下载excel模板</el-button>
    </a>
    <el-upload style="display: inline"
               :with-credentials="true"
               :show-file-list="false"
               :on-success="toolbarImport${businessCode!''}Success"
               :on-error="toolbarImport${businessCode!''}Error"
               action="${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/m0004.json"
               v-if="permission_import">
      <el-button type="success" icon="el-icon-upload2" size="small">导入excel</el-button>
    </el-upload>
  </el-card>
  <el-table v-if="${(businessCode?uncap_first)!''}SearchPage.totalElements > 0"
            :data="${(businessCode?uncap_first)!''}SearchPage.datas"
            border
            @selection-change="${(businessCode?uncap_first)!''}SearchPageSelectionChange"
            style="width: 100%"
            max-height="400">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            fixed
            prop="${(businessCode?uncap_first)!''}Code"
            label="编号"
            width="150">
    </el-table-column>
    <el-table-column
            prop="name"
            label="名称"
            width="120">
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="136">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="${(businessCode?uncap_first)!''}SearchPageViewClick(scope.row)">查看</el-button>
        <el-button type="text" size="small" @click="${(businessCode?uncap_first)!''}SearchPageModifyClick(scope.row)" v-if="permission_modify">编辑</el-button>
        <el-button type="text" size="small" @click="${(businessCode?uncap_first)!''}SearchPageDeleteClick(scope.row)" v-if="permission_delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-if="${(businessCode?uncap_first)!''}SearchPage.totalElements > 0"
                 @size-change="${(businessCode?uncap_first)!''}SearchFormPaginationSizeChange"
                 @current-change="${(businessCode?uncap_first)!''}SearchFormPaginationCurrentChange"
                 :current-page="${(businessCode?uncap_first)!''}SearchForm.page"
                 :page-sizes="[10,25, 50, 100, 200]"
                 :page-size="${(businessCode?uncap_first)!''}SearchForm.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="${(businessCode?uncap_first)!''}SearchPage.totalElements">
  </el-pagination>
  <el-alert v-if="${(businessCode?uncap_first)!''}SearchPage.totalElements < 1 && ${(businessCode?uncap_first)!''}SearchPage.page > 0"
            title="未查询到数据"
            type="warning"
            center
            show-icon>
  </el-alert>
  <el-dialog title="${businessName!}新增" :visible.sync="${(businessCode?uncap_first)!''}AddFormDialogVisible"
             @closed="${(businessCode?uncap_first)!''}AddFormDialogClosed">
    <el-form :model="${(businessCode?uncap_first)!''}AddForm" :rules="${(businessCode?uncap_first)!''}AddFormRules" ref="${(businessCode?uncap_first)!''}AddForm"
             label-width="80px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="${businessName!}编号" prop="${(businessCode?uncap_first)!''}Code">
        <el-input v-model="${(businessCode?uncap_first)!''}AddForm.${(businessCode?uncap_first)!''}Code"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="${businessName!}名称" prop="name">
        <el-input v-model="${(businessCode?uncap_first)!''}AddForm.name"
                  clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="${(businessCode?uncap_first)!''}AddFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="${(businessCode?uncap_first)!''}AddFormSubmit">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="${businessName!}编辑" :visible.sync="${(businessCode?uncap_first)!''}ModifyFormDialogVisible"
             @closed="${(businessCode?uncap_first)!''}ModifyFormDialogClosed">
    <el-form :model="${(businessCode?uncap_first)!''}ModifyForm" :rules="${(businessCode?uncap_first)!''}ModifyFormRules" ref="${(businessCode?uncap_first)!''}ModifyForm"
             label-width="80px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="${businessName!}编号" prop="${(businessCode?uncap_first)!''}Code">
        <el-input v-model="${(businessCode?uncap_first)!''}ModifyForm.${(businessCode?uncap_first)!''}Code"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="${businessName!}名称" prop="name">
        <el-input v-model="${(businessCode?uncap_first)!''}ModifyForm.name"
                  clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="${(businessCode?uncap_first)!''}ModifyFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="${(businessCode?uncap_first)!''}ModifyFormSubmit">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="${businessName!}查看" :visible.sync="${(businessCode?uncap_first)!''}ViewFormDialogVisible"
             @closed="${(businessCode?uncap_first)!''}ViewFormDialogClosed">
    <el-form :model="${(businessCode?uncap_first)!''}ViewForm" ref="${(businessCode?uncap_first)!''}ViewForm"
             label-width="74px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="${businessName!}编号" prop="${(businessCode?uncap_first)!''}Code">
        <el-input :value="${(businessCode?uncap_first)!''}ViewForm.${(businessCode?uncap_first)!''}Code" readOnly></el-input>
      </el-form-item>
      <el-form-item label="${businessName!}名称" prop="name">
        <el-input :value="${(businessCode?uncap_first)!''}ViewForm.name" readOnly></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="${(businessCode?uncap_first)!''}ViewFormDialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style lang="scss">

</style>

<script>
import qs from 'qs'

export default {
  data () {
    return {
      permission_add: false,
      permission_modify: false,
      permission_delete: false,
      permission_import: false,
      permission_export: false,
      ${(businessCode?uncap_first)!''}SearchForm: {
        ${(businessCode?uncap_first)!''}Name: '',
        ${(businessCode?uncap_first)!''}Code: '',
        pageSize: 25,
        pageNumber: 1
      },
      ${(businessCode?uncap_first)!''}SearchPage: {
        datas: [],
        totalElements: 0,
        totalPages: 0,
        hasPrevious: true,
        previous: 1,
        hasNext: true,
        next: 2,
        pages: [
          1,
          2,
          3,
          4,
          5,
          6
        ],
        page: 0,
        pageSize: 25
      },
      ${(businessCode?uncap_first)!''}SearchPageSelection: [],
      ${(businessCode?uncap_first)!''}AddFormDialogVisible: false,
      ${(businessCode?uncap_first)!''}AddForm: {
        ${(businessCode?uncap_first)!''}Code: '',
        name: ''
      },
      ${(businessCode?uncap_first)!''}AddFormRules: {
        ${(businessCode?uncap_first)!''}Code: [
          {required: true, message: `请输入${businessName!}编号`, trigger: 'blur'},
          {min: 1, max: 36, message: '${businessName!}编号长度在 1 到 36 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: `请输入${businessName!}名称`, trigger: 'blur'},
          {min: 1, max: 36, message: '${businessName!}名称长度在 1 到 36 个字符', trigger: 'blur'}
        ]
      },
      ${(businessCode?uncap_first)!''}ModifyFormDialogVisible: false,
      ${(businessCode?uncap_first)!''}ModifyForm: {
        ${(businessCode?uncap_first)!''}Code: '',
        name: ''
      },
      ${(businessCode?uncap_first)!''}ModifyFormRules: {
        ${(businessCode?uncap_first)!''}Code: [
          {required: true, message: `请输入${businessName!}编号`, trigger: 'blur'},
          {min: 1, max: 36, message: '${businessName!}编号长度在 1 到 36 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: `请输入${businessName!}名称`, trigger: 'blur'},
          {min: 1, max: 36, message: '${businessName!}名称长度在 1 到 36 个字符', trigger: 'blur'}
        ]
      },
      ${(businessCode?uncap_first)!''}ViewFormDialogVisible: false,
      ${(businessCode?uncap_first)!''}ViewForm: {
        ${(businessCode?uncap_first)!''}Code: '',
        name: ''
      }
    }
  },
  computed: {
    ${(businessCode?uncap_first)!''}SearchFormQueryString () {
      return qs.stringify(this.${(businessCode?uncap_first)!''}SearchForm)
    }
  },
  created () {
    this.$http({
      url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/index.json',
      method: 'post'
    }).then(response => {
      for (let key in response.data) {
        this[key] = response.data[key]
      }
    })
  },
  methods: {
    getCascaderObj (val, options) {
      return val.map(function (value, index, array) {
        for (let option of options) {
          if (option.value === value) {
            options = option.children

            return {
              value: option.value,
              label: option.label
            }
          }
        }

        return null
      })
    },
    ${(businessCode?uncap_first)!''}SearchFormSubmit (pageNumber) {
      if (pageNumber) {
        this.${(businessCode?uncap_first)!''}SearchForm.pageNumber = pageNumber
      }

      this.$http({
        url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/r0001.json',
        method: 'post',
        data: this.${(businessCode?uncap_first)!''}SearchForm
      }).then(response => {
        this.${(businessCode?uncap_first)!''}SearchPage = response.data
      })
    },
    ${(businessCode?uncap_first)!''}SearchFormResetFields () {
      this.$refs.${(businessCode?uncap_first)!''}SearchForm.resetFields()
    },
    ${(businessCode?uncap_first)!''}SearchFormPaginationSizeChange (size) {
      this.${(businessCode?uncap_first)!''}SearchForm.pageSize = size

      this.${(businessCode?uncap_first)!''}SearchFormSubmit()
    },
    ${(businessCode?uncap_first)!''}SearchFormPaginationCurrentChange (page) {
      this.${(businessCode?uncap_first)!''}SearchFormSubmit(page)
    },
    ${(businessCode?uncap_first)!''}SearchForm${businessCode!''}Select (item) {
      this.${(businessCode?uncap_first)!''}SearchForm.${(businessCode?uncap_first)!''}Code = item.code
    },
    ${(businessCode?uncap_first)!''}SearchForm${businessCode!''}QuerySearchAsync (queryString, cb) {
      this.$http({
        url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/r0002.json',
        method: 'post',
        data: {term: queryString}
      }).then(response => {
        cb(response.data)
      })
    },
    toolbarDeletesClick () {
      if (!this.${(businessCode?uncap_first)!''}SearchPageSelection || this.${(businessCode?uncap_first)!''}SearchPageSelection.length < 1) {
        this.$message({
          type: 'warning',
          message: '未勾选${businessName!}数据'
        })

        return
      }

      this.$confirm('将删除${businessName!}数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ${(businessCode?uncap_first)!''}Ids = this.${(businessCode?uncap_first)!''}SearchPageSelection.map(function (row, index, array) {
          return row.${(businessCode?uncap_first)!''}Id
        }).join(',')

        this.$http({
          url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/d0001.json',
          method: 'post',
          data: {${(businessCode?uncap_first)!''}Ids: ${(businessCode?uncap_first)!''}Ids}
        }).then(response => {
          this.$message({
            type: 'success',
            message: '删除${businessName!}数据成功'
          })

          this.${(businessCode?uncap_first)!''}SearchFormSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除${businessName!}数据'
        })
      })
    },
    toolbarImport${businessCode!''}Success (data, file, fileList) {
      if (data.errorCode) {
        this.$message({
          type: 'error',
          message: data.error
        })

        return
      }

      this.$message({
        type: 'success',
        message: '导入${businessName!}数据成功'
      })
    },
    toolbarImport${businessCode!''}Error (err, file, fileList) {
      this.$message({
        type: 'error',
        message: err.message
      })
    },
    ${(businessCode?uncap_first)!''}SearchPageSelectionChange (val) {
      this.${(businessCode?uncap_first)!''}SearchPageSelection = val
    },
    ${(businessCode?uncap_first)!''}SearchPageViewClick (row) {
      this.$http({
        url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/view.json',
        method: 'post',
        data: {${(businessCode?uncap_first)!''}Id: row.${(businessCode?uncap_first)!''}Id}
      }).then(response => {
        this.${(businessCode?uncap_first)!''}ViewForm = response.data

        this.${(businessCode?uncap_first)!''}ViewFormDialogVisible = true
      })
    },
    ${(businessCode?uncap_first)!''}SearchPageModifyClick (row) {
      this.$http({
        url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/modify.json',
        method: 'post',
        data: {${(businessCode?uncap_first)!''}Id: row.${(businessCode?uncap_first)!''}Id}
      }).then(response => {
        this.${(businessCode?uncap_first)!''}ModifyForm = response.data

        this.${(businessCode?uncap_first)!''}ModifyFormDialogVisible = true
      })
    },
    ${(businessCode?uncap_first)!''}SearchPageDeleteClick (row) {
      this.$confirm('将删除${businessName!}数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/d0001.json',
          method: 'post',
          data: {${(businessCode?uncap_first)!''}Id: row.${(businessCode?uncap_first)!''}Id}
        }).then(response => {
          this.$message({
            type: 'success',
            message: '删除${businessName!}数据成功'
          })

          this.${(businessCode?uncap_first)!''}SearchFormSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除${businessName!}数据'
        })
      })
    },
    ${(businessCode?uncap_first)!''}AddFormDialogClosed () {
      this.$refs.${(businessCode?uncap_first)!''}AddForm.resetFields()
    },
    ${(businessCode?uncap_first)!''}AddFormSubmit () {
      this.$refs.${(businessCode?uncap_first)!''}AddForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$http({
          url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/c0001.json',
          method: 'post',
          data: this.${(businessCode?uncap_first)!''}AddForm
        }).then(response => {
          this.$message({
            type: 'success',
            message: '${businessName!}新增成功'
          })

          this.${(businessCode?uncap_first)!''}AddFormDialogVisible = false
        })
      })
    },
    ${(businessCode?uncap_first)!''}ViewFormDialogClosed () {
      this.$refs.${(businessCode?uncap_first)!''}ViewForm.resetFields()
    },
    ${(businessCode?uncap_first)!''}ModifyFormDialogClosed () {
      this.$refs.${(businessCode?uncap_first)!''}ModifyForm.resetFields()
    },
    ${(businessCode?uncap_first)!''}ModifyFormSubmit () {
      this.$refs.${(businessCode?uncap_first)!''}ModifyForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$http({
          url: '${api_root_url!}/v1/${moduleMapperCode}/${(businessCode?uncap_first)!''}/u0001.json',
          method: 'post',
          data: this.${(businessCode?uncap_first)!''}ModifyForm
        }).then(response => {
          this.$message({
            type: 'success',
            message: '${businessName!}修改成功'
          })

          this.${(businessCode?uncap_first)!''}ModifyFormDialogVisible = false
        })
      })
    }
  }
}
</script>
